<template>
	<!-- 外设添加/编辑/详情 -->
	<div class="heightMax order publicbox" v-loading='complieLoading'>
		<div class="header">
			<div class="listName">
				<i></i><span class="font14">外设配置</span>
			</div>
			<div>
				<el-button type="primary" size="mini" @click="enture('form')" v-loading='btnLoading' v-if="!isDisabled">保存</el-button>
				<el-button size="mini" @click='backRouter'>返回</el-button>
			</div>
		</div>
		<vueScroll>
			<div class="content">
				<el-form ref="form" :model="form" :rules="rules" label-width="130px" size="mini">
					<el-row :gutter="20">
						<el-col :span="7.5">
							<el-form-item label="外设编号:" prop="peripheralCode">
								<el-input v-model="form.peripheralCode" placeholder="请输入外设编号" size="mini" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7.5">
							<el-form-item label="电梯类型:">
								<el-select v-model="form.liftType" placeholder="请选择电梯类型" size="mini" clearable :disabled='isDisabled'>
									<el-option v-for="(item,index) in liftTypeArr" :label="item.label" :value="item.value" :key='index'></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="7.5">
							<el-form-item label="电梯注册号:">
								<!-- 	<el-select v-model="form.liftCode" @change="liftCodeChange" filterable allow-create default-first-option
								 placeholder="请输入电梯注册号" :disabled='isDisabled' clearable>
									<el-option v-for="item in options" :key="item.id" :label="item.register_code" :value="item.register_code">
									</el-option>
								</el-select> -->
								<el-input v-model="form.liftCode" placeholder="请输入电梯注册号" :disabled='isDisabled' clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="7.5">
							<el-form-item label="维保单位:">
								<el-select filterable v-model="form.mainCom" placeholder="请选择维保单位" size="mini" clearable :disabled='isDisabled'>
									<el-option v-for="(item) in mainComArr" :label="item.name" :value="item.id" :key='item.id'></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="7.5">
							<el-form-item label="外设类型:">
								<el-select v-model="form.peripheralType" placeholder="请选择外设类型" size="mini" clearable :disabled='isDisabled'>
									<el-option v-for="(item,index) in peripheralTypeArr" :label="item.label" :value="item.value" :key='index'></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="7.5">
							<el-form-item label="采集器编号:">
								<el-input v-model="form.gatherCode" placeholder="请输入采集器编号" size="mini" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="7.5">
							<el-form-item label="电梯出厂编号:" prop="LiftFactoryNum">
								<el-input v-model="form.LiftFactoryNum" placeholder="请输入电梯出厂编号" size="mini" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7.5">
							<el-form-item label="使用单位:">
								<el-select filterable v-model="form.userCom" placeholder="请选择使用单位" size="mini" clearable :disabled='isDisabled'>
									<el-option v-for="(item) in userComArr" :label="item.name" :value="item.id" :key='item.id'></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="7.5">
							<el-form-item label="制造单位:" prop="LiftFactory">
								<!-- <el-select placeholder="请选择制造单位" filterable remote reserve-keyword :remote-method="remoteMethod" :loading="loadingSelected" v-model="form.LiftFactory"
								 size="mini" clearable :disabled='isDisabled' @change="changeFirmList">
									<el-option v-for="(item) in LiftFactoryArr" :label="item.name" :value="item.id" :key='item.id'></el-option>
								</el-select> -->
								<el-select filterable v-model="form.LiftFactory" placeholder="请选择电梯厂家" size="mini" clearable :disabled='isDisabled'>
									<el-option v-for="(item) in LiftFactoryArr" :label="item.manufacturer_name" :value="item.manufacturer_code_elevator"
									 :key='item.manufacturer_code_elevator'></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="7.5">
							<el-form-item label="外设SIM卡号:">
								<el-input v-model="form.cardCode" placeholder="请输入外设SIM卡号" size="mini" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7.5">
							<el-form-item label="安装位置:">
								<el-input v-model="form.installationSite" placeholder="请输入安装位置" size="mini" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7.5">
							<el-form-item label="起始层:">
								<el-input type="number" v-model="form.startFloor" placeholder="请输入起始层" size="mini" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="7.5">
							<el-form-item label="跳层:">
								<div class="el-icon-circle-plus-outline addBtn cursor" @click="addJumpLayer"></div>
								<span style="margin-left: 5px;">例：如2层,3层跳过则输入2~3</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20" class='currentRow '>
						<el-col :span="7.5" v-for="(item,index) in jumpLayerArr" :key='index' :class='[item.isShow ? "marginBottom" : ""]'>
							<el-form-item>
								<div class="flexBoxNow">
									<el-input-number type='number' v-model='item.value1' @change='jumpLayerBlur(item.value1,item.value2,index)'></el-input-number>
									<span style="margin: 0 5px;">~</span>
									<el-input-number type="number" v-model='item.value2' @change='jumpLayerBlur(item.value1,item.value2,index)'></el-input-number>
									<div class="el-icon-circle-close cursor delete" @click="deleteJump(index)"></div>
								</div>
								<div class="message" v-show="item.isShow">
									后面输入的层数必须大于等于前面的数
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="7.5">
							<el-form-item label="半层:">
								<div class="el-icon-circle-plus-outline addBtn cursor" @click="addhalfLayer"></div>
								<span style="margin-left: 5px;">例：如半层在2层,3层之间则输入2~3</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20" class='currentRow'>
						<el-col :span="7.5" v-for="(item,index) in halfLayerArr" :key='index'>
							<el-form-item>
								<div class="flexBoxNow">
									<el-input-number type='number' v-model='item.value1' @change='halfLayerArrBlur(item.value1,item.value2,index)'></el-input-number>
									<span style="margin: 0 5px;">~</span>
									<el-input-number type="number" v-model='item.value2' @change='halfLayerArrBlur(item.value1,item.value2,index)'></el-input-number>
									<div class="el-icon-circle-close cursor delete" @click="deleteHalf(index)"></div>
								</div>
								<div class="message" v-show="item.isShow">
									后面输入的层数必须大于等于前面的数,两层相减不能大于1，不能为0
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<div  v-if="role == 0 && nowType == 2">
						<div class="listName">
							<i></i><span class="font14">数据详情</span>
						</div>
						<el-row>
							<el-col :span="16" :offset="1">
								<div class="copy" id="content">
									{{rec}}
								</div>
								<el-button type="primary" style="margin-left: 170px;margin-top:15px" @click="copy">复制所有接收数据</el-button>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="16" :offset="1">
								<div class="copy" id="content1">
									{{send}}
								</div>
								<el-button type="primary" style="margin-left: 170px;margin-top:15px" @click="copy1">复制所有发送数据</el-button>
							</el-col>
						</el-row>
					</div>
				</el-form>
			</div>
		</vueScroll>

	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading,
		axiosChange
	} from "@/common.js";
	import {
		peripheralCode,
		LiftFactoryNum,
		LiftFactory,
		cardCode,
	} from "./rules.js"
	export default {
		props: {
			nowType: {
				type: Number,
				default () {
					return 0 //0是新增 1是编辑 2是详情
				}
			}
		},
		mounted() {
			this.getSearch()
			if (this.nowType) {
				this.getComplie()
			}
		},
		data() {
			return {
				complieLoading: false,
				options: [],
				jumpLayerArr: [],
				halfLayerArr: [],
				liftTypeArr: [{
						value: 10,
						label: '曳引与强制驱动电梯'
					}, {
						value: 20,
						label: '液压驱动电梯'
					},
					{
						value: 30,
						label: '杂物电梯'
					},
					{
						value: 40,
						label: '自动扶梯'
					}
				],
				mainComArr: [],
				peripheralTypeArr: [{
						value: '01',
						label: '采集器'
					},
					{
						value: '02',
						label: '摄像头'
					},
					{
						value: '03',
						label: '高清屏'
					}
				],
				userComArr: [],
				LiftFactoryArr: [],
				form: {
					liftCode: '',
					liftType: 10,
					peripheralCode: '',
					mainCom: '',
					peripheralType: '01',
					gatherCode: '',
					LiftFactoryNum: '',
					userCom: '',
					LiftFactory: '',
					cardCode: '',
					installationSite: '',
					startFloor: '1'
				},
				rules: {
					peripheralCode,
					LiftFactoryNum,
					LiftFactory,
					cardCode,
				},
				btnLoading: false,
				loadingSelected: false,
				rec:'',
				send:''
			}
		},
		computed: {
			role() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ''
				}
			},
			isDisabled() {
				if (this.nowType == 2) {
					return true
				} else {
					return false
				}
			},
			PeripheralsManId() {
				if (localStorage.PeripheralsManId) {
					return JSON.parse(localStorage.PeripheralsManId).id
				} else {
					return ''
				}
			}
		},
		methods: {
			copy() {
				/* 创建range对象   */
				const range = document.createRange();
				range.selectNode(document.getElementById('content'));
				/* 窗口的selection对象，表示用户选择的文本 */
				const selection = window.getSelection();
				if (selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
				selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中
				document.execCommand('copy'); // 执行copy命令，copy用户选择的文本
			},
			copy1() {
				/* 创建range对象   */
				const range = document.createRange();
				range.selectNode(document.getElementById('content1'));
				/* 窗口的selection对象，表示用户选择的文本 */
				const selection = window.getSelection();
				if (selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
				selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中
				document.execCommand('copy'); // 执行copy命令，copy用户选择的文本
			},
			//添加跳层
			addJumpLayer() {
				let obj = {
					value1: '',
					value2: '',
					isShow: false
				}
				this.jumpLayerArr.push(obj)
			},
			deleteJump(index) {
				this.jumpLayerArr.splice(index, 1)
			},
			jumpLayerBlur(newValue1, newValue2, index) {
				let value1 = Number(newValue1)
				let value2 = Number(newValue2)
				if (value1 && value2) {
					if (value1 > value2) {
						let obj = {
							value1: value1,
							value2: value2,
							isShow: true
						}
						this.$set(this.jumpLayerArr, index, obj)
					} else {
						let obj = {
							value1: value1,
							value2: value2,
							isShow: false
						}
						this.$set(this.jumpLayerArr, index, obj)
					}
				}
			},
			//添加半层
			addhalfLayer() {
				let obj = {
					value1: '',
					value2: '',
					isShow: false
				}
				this.halfLayerArr.push(obj)
			},
			deleteHalf(index) {
				this.halfLayerArr.splice(index, 1)
			},
			halfLayerArrBlur(newValue1, newValue2, index) {
				let value1 = Number(newValue1)
				let value2 = Number(newValue2)
				if (value1 && value2) {
					if (value2 - value1 > 1 || value2 - value1 == 0 || value1 > value2) {
						let obj = {
							value1: value1,
							value2: value2,
							isShow: true
						}
						this.$set(this.halfLayerArr, index, obj)
						return
					} else {
						let obj = {
							value1: value1,
							value2: value2,
							isShow: false
						}
						this.$set(this.halfLayerArr, index, obj)
					}
				}
			},
			//获取编辑数据
			getComplie() {
				this.complieLoading = true
				console.log(this.PeripheralsManId)
				let url = '/manu/collection/' + this.PeripheralsManId + '/'
				axiosGet(url, {}, (res) => {
					this.complieLoading = false
					if (res.code == 0) {
						this.form.liftCode = res.detail.elevator_code
						this.form.liftType = res.detail.elevator_type
						this.form.peripheralCode = res.detail.device_code_elevator
						this.form.mainCom = res.detail.maintain_company
						this.form.peripheralType = res.detail.device_type
						this.form.gatherCode = res.detail.collection_num
						this.form.LiftFactoryNum = res.detail.manufacturer_number_elevator
						this.form.userCom = res.detail.property_company
						this.form.LiftFactory = res.detail.manufacturer_code_elevator
						this.form.cardCode = res.detail.sim_no
						this.form.installationSite = res.detail.address
						this.form.startFloor = res.detail.start_floor
						if (res.detail.jump_layer) {
							res.detail.jump_layer.split(';').map((item) => {
								let obj = {
									value1: '',
									value2: ''
								}
								let newIndex = item.indexOf('~')
								obj.value1 = item.slice(0, newIndex)
								obj.value2 = item.slice(newIndex + 1)
								this.jumpLayerArr.push(obj)
							})
						}
						if (res.detail.half_layer) {
							res.detail.half_layer.split(';').map((item) => {
								let obj = {
									value1: '',
									value2: ''
								}
								let newIndex = item.indexOf('~')
								obj.value1 = item.slice(0, newIndex)
								obj.value2 = item.slice(newIndex + 1)
								this.halfLayerArr.push(obj)
							})
						}
						if (Object.keys(res.detail.register_log[0].rec).length > 0) {
								this.rec = res.detail.register_log[0].rec
						}else{
							this.rec = {}
						}
						if (Object.keys(res.detail.register_log[0].send).length > 0) {
								this.send = res.detail.register_log[0].send
						}else{
							this.send = {}
						}
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			getSearch() {
				axiosGet('/manu/collection/company/', {}, (res) => {
					console.log(res)
					if (res.code == 0) {
						this.LiftFactoryArr = res.detail.ec
						this.mainComArr = res.detail.maintain_company
						this.userComArr = res.detail.property_company
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//电梯注册代码过滤
			liftCodeChange(res) {
				if (res) {
					this.options.map((item) => {
						if (item.register_code == this.form.liftCode) {
							this.form.mainCom = item.maintain_company
							this.form.userCom = item.property_company
							this.form.liftType = item.elevator_type
						}
					})
					if (res.length > 10) {
						let params = {
							register_code: this.form.liftCode
						}
						axiosGet('/manu/collection/elevator/', params, (res) => {
							if (res.code == 0) {
								this.options = res.detail
							} else {
								this.$message.error(res.detail.result)
							}
						})
					}
				}
			},
			//返回外设列表
			backRouter() {
				localStorage.removeItem('PeripheralsManId')
				let obj = {
					name: '外设管理',
					router: '/MainView/BusinessConfiguration/PeripheralsMan'
				}
				this.$store.commit('GOTAGROUTER', obj)
			},
			//保存
			enture(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.btnLoading = true
						let jumpLayerStr = ''
						this.jumpLayerArr.map((item) => {
							if (item.value1 && item.value2) {
								jumpLayerStr += `${item.value1}~${item.value2};`
							}
						})
						jumpLayerStr = jumpLayerStr.slice(0, -1)
						let halflayerStr = ''
						this.halfLayerArr.map((item) => {
							if (item.value1 && item.value2) {
								halflayerStr += `${item.value1}~${item.value2};`
							}
						})
						halflayerStr = halflayerStr.slice(0, -1)
						let url = ''
						let type = ''
						if (this.nowType == 1) {
							url = '/manu/collection/' + this.PeripheralsManId + '/'
							type = 'put'
						} else {
							url = '/manu/collection/'
							type = 'post'
						}
						let data = {
							manufacturer_code_elevator: this.form.LiftFactory, // 电梯厂家编号
							elevator_code: this.form.liftCode, //电梯注册代码
							manufacturer_number_elevator: this.form.LiftFactoryNum, //电梯出厂编号
							device_code_elevator: this.form.peripheralCode, //外设编号
							device_type: this.form.peripheralType, //外设类型
							sim_no: this.form.cardCode, //sim卡号
							collection_num: this.form.gatherCode, //采集器编号
							address: this.form.installationSite, //位置
							maintain_company: this.form.mainCom, //维保单位id
							property_company: this.form.userCom, //使用单位id
							elevator_type: this.form.liftType, // 电梯类型
							start_floor: Number(this.form.startFloor),
							jump_layer: jumpLayerStr,
							half_layer: halflayerStr
						}
						console.log(data)
						axiosChange(url, type, data, (res) => {
							this.btnLoading = false
							if (res.code == 0) {
								this.$message({
									type: 'success',
									message: '操作成功'
								})
								localStorage.RoleManagementFlush = JSON.stringify({
									flush: 1
								})
								this.backRouter()
							} else {
								this.$message.error(res.detail.result)
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang='less'>
	.header {
		display: flex;
		justify-content: space-between;
	}

	.content {
		height: 90%;
		width: 100%;
		margin-top: 5px;
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
			margin-left: 0;
		}
	}

	.el-row {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.addBtn {
		float: left;
		margin-top: 4px;
		font-size: 20px;
		color: #777;
	}

	.delete {
		font-size: 20px;
		margin-top: 5px;
		margin-left: 5px;
		color: #777;
	}
</style>
